<template>
    <div style="width: 300px;height: 180px; position: relative" >
    <!--    <div class="jk" @click="bofang">
            <div class="sdf"></div>
        </div>-->
        <video-player
                :options="playerOptions"
                poster
                class="video-player vjs-custom-skin"
                :playsinline="true"
                style="object-fit:fill"
                :volume="0.6"
        />
    </div>
    <hr>
</template>

<script setup>

    import {ref,defineEmits,defineProps,onMounted} from "vue";
    let objProps = defineProps({
        src:{
            type:String,
            default:""
        }
    })
    onMounted(()=>{
        console.log("objProps.src",objProps.src)
        // playerOptions.value.sources[0].src = objProps.src
    })

    onUnmounted(()=>{
        console.log("objProps.src2",objProps.src)
        // objProps.src = ""
        // playerOptions.value.sources[0].src = objProps.src
    })

    let playerOptions = ref({
        // height: 200,
        // width: document.documentElement.clientWidth, //播放器宽度
        playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
        // autoplay: 'any', // 如果true,浏览器准备好时开始回放。
        muted: true, // 默认情况下将会消除任何音频。
        loop: true, // 导致视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controls: true,
        sources: [
            {
                type: "", //这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
                src: objProps.src //url地址
            }
        ],
        controlBar: {
            timeDivider: true,
            durationDisplay: true,
            remainingTimeDisplay: false,
            fullscreenToggle: true // 全屏按钮
        }
    })
    //展示视频封面
    const videoLoad = (o)=>{
        //获取video标签
        let video = document.getElementById(o.target.getAttribute("id")+'_html5_api');
        // console.log(video.videoWidth )
        // console.log(video.videoHeight )
        //定义缩放比例
        let scale = 1;
        //创建canvas画布
        let canvas = document.createElement("canvas");
        //canvas宽高为video宽高*缩放比例
        canvas.width = video.videoWidth * scale;
        canvas.height = video.videoHeight * scale;
        //canvas画出视频封面
        canvas.getContext("2d").drawImage(video, 0, 0, canvas.width, canvas.height);
        //canvas转base64
        let src = canvas.toDataURL("image/png");
        //赋值到playerOptions.poster
        this.playerOptions.poster = src;
    }
    const bofang = ()=>{
        console.log("bofang")
    }
</script>

<style scoped>
    /*7版本的videojs 必须写这么点样式才能显示正常 这个类之间不是逗号*/
    :deep(.video-js .vjs-big-play-button) {
        /*display: none;*/
        border:none;
        font-size: 4em;
        position: absolute;
        left:0;
        top:0;
        right: 0;
        bottom: 0;
        margin: auto;
        background-color: transparent ;
    }
/*    .jk{
        width: 100%;
        height: 100%;
        z-index: 999;
        color:#fff;
        position: absolute;
        !*background-color: #fff;*!

    }
    .sdf{
        position: absolute;
        top:35%;
        left: 45%;
        border-top: 23px red solid ;
        border-right: 25px red solid ;
        border-bottom: 24px red solid ;
        border-left: 35px red solid ;
        !*border-top: none;*!
        !*border-color: transparent transparent blue transparent*!
        border-color: transparent transparent transparent rgba(255,255,255,.5);
        opcity:.1
    }*/

</style>